<template>
  <div class="balance-content">
    <viHeader
      :title="title"
      :radioList="radioList"
      @enlarge="enlarge"
      @changeRadio="changeRadio"
      v-if="!showHeader"
    />
    <div class="balance-main" :style="{height:height}">
      <div class="balance-list" v-for="item in list">
        <div class="balance-list-top">
          <div class="balance-list-left">{{item.name}}</div>
          <div class="balance-list-right" data-unit="万元">
            {{item.money}}
          </div>
        </div>
        <div class="balance-list-bar">
          <div class="balance-list-bar-active" :style="{width:item.percent}"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import viHeader from "@/components/visualization/header/index";
import echarts from "echarts";
export default {
  name: "vi-balance",
  components: {
    viHeader
  },
  props:{
    showHeader:{
      default:false,
    },
    height:{
      default:null,
    },
    balanceList:{
      default:[],
    },
  },
  computed: {
    list(){
      let list=[]
      if(this.balanceList.length>0){
        const max=Math.max(...this.balanceList.map(item=>item.accountAmount))
        this.balanceList.forEach(item=>{
          list.push({
            ...item,
            money:(item.accountAmount/10000).toFixed(4)||0,
            percent:(item.accountAmount/max*100)+'%'
          })
        })
      }
      return list
    },
  },
  data() {
    return {
      title: {
        name: "账户余额"
      },
      radioList: {
        radio: "2",
        list: []
      }
    };
  },
  mounted() {},
  methods: {
    enlarge() {
      this.$emit("enlarge")
    },
    changeRadio(val) {
      console.log(val);
    }
  }
};
</script>

<style scoped lang="scss">
@import "../styles/balance.scss";
</style>
